<template>
  <div class="dialog-bg">
    <div class="saveAsFileDialog">
      <div class="title">
        <span class="title-tip">{{ titleTip }}</span>
        <i class="el-icon-close" @click="onCancelClick"></i>
      </div>
      <div class="saveAsFileDialog-body">
        <div class="markup-view">
          <el-input placeholder :disabled="showMode == 1" v-model="value" class="ipt" v-if="showMode != 1">
            <template slot="prepend">
              <span :title="fileNameWithoutExt">{{ fileNameWithoutExt }}</span>
            </template>
            <template slot="append">.xml</template>
          </el-input>
          <el-input placeholder :disabled="showMode == 1" v-model="value" class="iptShow" v-else>
            <template slot="append">.xml</template>
          </el-input>
          <button class="markup-btn" @click="onOkClick">OK</button>
        </div>
        <div class="markup-file-view">
          <span class="markup-file-message">{{ $t('message.cadViewer.saveAsFileDialog.title_message') }}</span>
          <button class="markup-btn-cancel" @click="onCancelClick">{{ $t('message.public.cancel') }}</button>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">{{ $t("message.login.userName") }} :</span>
          <el-input :placeholder="$t('message.cadViewer.saveAsFileDialog.input_placehold')" v-model="userName"
            :disabled="showMode == 1" clearable class="markup-form-input"></el-input>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">{{ $t('message.cadViewer.saveAsFileDialog.input_dept') }}:</span>
          <el-input :placeholder="$t('message.cadViewer.saveAsFileDialog.input_placehold')" v-model="userDept"
            :disabled="showMode == 1" clearable class="markup-form-input"></el-input>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">{{ $t('message.cadViewer.saveAsFileDialog.input_company') }}:</span>
          <el-input :placeholder="$t('message.cadViewer.saveAsFileDialog.input_placehold')" v-model="userCompany"
            :disabled="showMode == 1" clearable class="markup-form-input"></el-input>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">{{ $t('message.cadViewer.saveAsFileDialog.input_addr') }}:</span>
          <el-input :placeholder="$t('message.cadViewer.saveAsFileDialog.input_placehold')" v-model="userAddr"
            :disabled="showMode == 1" clearable class="markup-form-input"></el-input>
        </div>
        <div class="markup-form">
          <span class="markup-form-label">{{ $t('message.cadViewer.saveAsFileDialog.input_tel') }}:</span>
          <el-input :placeholder="$t('message.cadViewer.saveAsFileDialog.input_placehold')" v-model="userTel"
            :disabled="showMode == 1" clearable class="markup-form-input"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导出模块
import { CheckMarkupFile } from "../../api/api";
import { getLocalStorage } from "../../utils/storage";

export default {
  // 模块名字
  name: "saveAsFileDialog",
  props: {
    showMode: {
      // 0 create  1 査看  2 saveas
      type: Number,
      default: 0,
    },

    fileId: {
      type: String,
      default: "",
    },

    fileNameWithoutExt: {
      type: String,
      default: "",
    },

    markupFileData: {
      type: Object,
      default: null,
    },

    markupFileBaseData: {
      type: Object,
      default: null,
    },
  },
  // 模块数据
  data() {
    //数据
    return {
      value: "",
      userName: getLocalStorage("userData").name,
      userDept: getLocalStorage("userData").dept,
      userCompany: getLocalStorage("userData").company,
      userAddr: getLocalStorage("userData").addr,
      userTel: getLocalStorage("userData").mobile,
      titleTip: "",
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    async checkMarkupFileName(fileId, e) {
      let dataJson = {
        fileID: fileId,
        markupFileName: e,
      };

      // this.showPageLoading(true);
      var isHavaName = false;
      let res = await CheckMarkupFile(dataJson)
      // .then((res) => {
      //   console.log(res);
      //   // this.showPageLoading(false);
      //   if (res && res.data.code == -300) {
      //     console.log(res.data.msg);
      //     isHavaName = true;
      //   }
      // });

      return res;
    },

    onCancelClick() {
      this.$emit("onCancelClick", null);
    },
    onOkClick() {
      if (this.showMode != 1) {
        if (!this.checkInputValues()) {
          this.$alert(this.$t('message.public.tip1'), '', {
            confirmButtonText: 'OK',
            type: 'warning',
          });
          return;
        }
        var _self = this;
        this.checkMarkupFileName(
          this.fileId,
          this.fileNameWithoutExt + "." + this.value + ".xml"
        ).then(function (re) {
          if (re.data.code == 0) {
            console.log(re);
            _self.createFile(false);
          } else {
            _self
              .$alert(
                // _self.fileNameWithoutExt +
                // "." +
                // _self.value +
                // ".xml" +
                // _self.$t("message.cadViewer.taggingMode.coverSaveTip"),
                // _self.$t("message.public.tip"),
                re.data.msg,
                {
                  confirmButtonText: _self.$t("message.public.confirm"),
                  // cancelButtonText: _self.$t("message.public.cancel"),
                  type: "warning",
                }
              )
              .then(() => {
                // _self.createFile(true);
              })
              .catch(() => { });
          }
        });
      } else {
        this.$emit("onOkClick", null);
      }
    },

    createFile(e) {
      var re = null;

      re = {};
      if (this.value) re.value = this.fileNameWithoutExt + "." + this.value;
      re.userName = this.userName ? this.userName : "";
      re.departName = this.userDept ? this.userDept : "";
      re.companyName = this.userCompany ? this.userCompany : "";
      re.address = this.userAddr ? this.userAddr : "";
      re.phoneNumber = this.userTel ? this.userTel : "";
      re.force = e;
      this.$emit("onOkClick", re);
    },

    checkInputValues() {
      if (
        this
          .value /* &&
        this.userName &&
        this.userDept &&
        this.userCompany &&
        this.userAddr &&
        this.userTel */
      )
        return true;

      return false;
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    if (this.markupFileBaseData != null && this.showMode == 1) {
      this.value = this.markupFileBaseData.value
        ? this.markupFileBaseData.value
        : "";
      this.userName = this.markupFileBaseData.userName
        ? this.markupFileBaseData.userName
        : "";
      this.userDept = this.markupFileBaseData.departName
        ? this.markupFileBaseData.departName
        : "";
      this.userCompany = this.markupFileBaseData.companyName
        ? this.markupFileBaseData.companyName
        : "";
      this.userAddr = this.markupFileBaseData.address
        ? this.markupFileBaseData.address
        : "";
      this.userTel = this.markupFileBaseData.phoneNumber
        ? this.markupFileBaseData.phoneNumber
        : "";
    }

    if (this.markupFileData != null && this.showMode == 1) {
      this.value = this.markupFileData.markUpFileName;
    }
    this.titleTip = this.showMode == 1 ? this.$t("message.cadViewer.saveAsFileDialog.title_message") : this.$t("message.cadViewer.saveAsFileDialog.input_placeholdSave")
    console.log(this.showMode)
  },

  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() { },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.dialog-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
}

.saveAsFileDialog {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 488px;
  height: 354px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03),
    0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);

  .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;

    .title-tip {
      margin-left: 24px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
    }

    .el-icon-close {
      margin-right: 24px;
      color: #000000;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .saveAsFileDialog-body {
    width: 100%;
    height: calc(100% - 40px);
    padding: 16px 24px 24px 24px;

    .markup-view {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .ipt {
        ::v-deep .el-input__inner {
          height: 32px;
          width: 150px;
        }
      }

      .iptShow {
        ::v-deep .el-input__inner {
          height: 32px;
          width: 245px;
        }
      }

      .markup-btn {
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
        width: 88px;
        height: 32px;
        background: rgba(17, 108, 186, 1);
        // border: 1px solid rgba(217, 217, 217, 1);
        border-radius: 4px;
        outline: none;
      }
    }

    .markup-file-view {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;

      .markup-file-message {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
      }

      .markup-btn-cancel {
        min-width: 88px;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(217, 217, 217, 1);
        border-radius: 4px;
        outline: none;
        padding: 0 8px;
      }
    }

    .markup-form {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 8px;

      .markup-form-label {
        width: 80px;
        font-size: 14px;
        text-align: left;
        color: rgba(0, 0, 0, 0.65);
      }

      .markup-form-input {
        width: 224px;
        margin-left: 8px;

        ::v-deep .el-input__inner {
          width: 224px;
          height: 32px;
        }
      }
    }
  }
}

::v-deep .el-input-group {
  max-width: 120px;
}

::v-deep .el-input-group__prepend {
  max-width: 94px;
  overflow: hidden;
  white-space: nowrap;

  text-overflow: ellipsis;

  -o-text-overflow: ellipsis;
}
</style>
